<template>
  <div class="legend">
    <div class="legend-title">
      图例
      <i class="icon cs-p ml-5" :class="[show ? 'el-icon-arrow-down' : 'el-icon-arrow-up']" @click="show = !show"></i>
    </div>
    <div class="legend-list" v-show="show">
      <div v-for="item in legends" :key="item.key" class="legend-item">
        <span class="item-label ellipsis">{{item.label}}</span>
        <img :src="icons[item.key]" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import {icons} from '@/const'
export default {
  data() {
    return {
      icons,
      show: true,
      legends: [{
        key: 'marker-red',
        label: '未处理',
      }, {
        key: 'marker-yellow',
        label: '未处理-不跳舞',
      }, {
        key: 'marker-green',
        label: '已处理',
      }, {
        key: 'marker-blue',
        label: '已选择',
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.legend {
  padding: 10px;
  background: rgba(35, 35, 35, 0.4);
  display: inline-block;
  color: #fff;
  .legend-title {
    border-bottom: 1px solid #999;
    padding-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .legend-list {
    padding-top: 4px;
    .legend-item {
      .item-label {
        width: 120px;
        display: inline-block;
      }
    }
  }
}
</style>
